<template>
     <section v-if="item.basicInfo">
      <img :src="item.basicInfo.pic" alt="" />
      <div class="section">
        <div class="price">
          <div class="price-currunt">
            <span>￥</span>{{item.basicInfo.minPrice}}.00
          </div>
          <div class="price-origin">
            <span>价格</span>￥<s>{{item.basicInfo.originPrice}}.00</s>
          </div>
        </div>
        <div class="itemtitle">{{item.basicInfo.name}}</div>
        <div class="desc">{{item.basicInfo.characteristic}}</div>
      </div>
      <div class="stock">
        <div>运费 不包邮</div>
        <div>剩余{{ item.basicInfo.stores }} </div>
      </div>
      <div class="clickable">
        <div>领券</div>
        >
      </div>
      <div class="serve"><span>服务</span>收货后结算·支持退货</div>
      <div class="choose">
        <div><span>选择</span>颜色</div>
        <span>></span>
      </div>
      <div class="allping">
        <div class="pingjia">
          <div>评价(2)</div>
          <span>全部评价 ></span>
        </div>
      </div>
      <div class="title">
        <p>商品详情</p>
      </div>
      <div v-html="item.content" class="item"></div>
      <div class="fix">
        <div>
          <img src="../assets/img/home-off.png" alt="" />
          <p>首页</p>
        </div>
        <div>
          <img src="../assets/img/home-off.png" alt="" />
          <p>客服</p>
        </div>
        <div>
          <img src="../assets/img/home-off.png" alt="" />
          <p>购物车</p>
        </div>
        <p><button>加入购物车</button><button>立即购买</button></p>
      </div>
    </section>
</template>
<script lang="ts" setup>
import Vue from 'vue'
import {ref} from "vue"
import request from "../../utils/request"
import route from "../router"
let item:any=ref([])
function getItem(id:any){
    request({
        url:"/shop/goods/detail",
        method:"get",
        params:{id:id}
    }).then((res:any)=>{
        console.log(res)
        if(res.code===0){
            item.value=res.data
        }
    })
}
function created(){
  console.log(route.currentRoute.value.query.id)
  getItem(route.currentRoute.value.query.id)
}
created()
</script>
<style scoped>
section {
  width: 375px;
  background-color: #f7f8fa;
}
img {
  width: 100%;
  height: 375px;
}
.section {
  width: 100%;
  
  padding: 0 15px 15px;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.price {
  margin-top: 2.67vw;
  height: 42px;
  width: 100%;
}
.price-currunt {
  font-size: 5.87vw;
  font-weight: 700;
  color: #1ba784;
}
.price-currunt span {
  font-size: 3.73vw;
  margin-right: 0.53vw;
}
.price-origin {
  font-size:12px;
  color: #969799;
}
.price-origin span {
  margin-right: 4px;
}
.itemtitle {
  width: 100%;
  height: 20px;
  font-size: 16px;
  color: #323233;
}
.desc {
  width: 100%;
  font-size:12px;
  margin-top: 4px;
  color: #969799;
}
.stock {
  display: flex;
  justify-content: space-between;
  padding: 2.67vw 4vw;
  background: #fff;
  box-sizing: border-box;
  color: #969799;
  font-size: 12px;
}
.clickable {
  width: 100%;
  height:44px;
  margin-bottom: 2.67vw;
  box-sizing: border-box;
  width: 100%;
  padding: 2.67vw 4.27vw;
  overflow: hidden;
  font-size: 3.73vw;
  line-height: 6.4vw;
  background-color: #fff;
  color: #323233;
  display: flex;
  justify-content: space-between;
}
.serve {
  width: 100%;
  height: 44px;
  padding:10px 16px;
  background-color: #fff;
  color: #323233;
  font-size: 14px;
  box-sizing: border-box;
}
.serve span {
  color: #969799;
  margin-right: 12px;
}
.choose {
  width: 100%;
  height: 44px;
  padding: 10px 16px;
  background-color: #fff;
  color: #323233;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  margin-bottom: 2.67vw;
}
.choose span {
  color: #969799;
  margin-right: 12px;
}
.choose span:nth-child(2) {
  margin: 0;
}
.allping {
  width: 100%;
  padding:10px 16px;
  box-sizing: border-box;
  background-color: #fff;
  margin-bottom: 2.67vw;
}
.pingjia {
  width: 100%;
  height: 44px;
  padding: 10px 0;
  background-color: #fff;
  color: #323233;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  margin-bottom: 2.67vw;
}
.pingjia span {
  color: #969799;
}
.title {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin-top: 10px;
  font-weight: 600;
  font-size: 16px;
}

.title::before {
  width: 20px;
  height:6px;
  content: "";
  background-image: url(https://v-shop.shuzp.top/v2/assets/img/line_askew.225cce63.png);
  margin-right: 10px;
}

.title::after {
  width: 20px;
  height: 6px;
  content: "";
  background-image: url(https://v-shop.shuzp.top/v2/assets/img/line_askew.225cce63.png);
  margin-left: 10px;
}
.item {
  width: 100%;
  padding: 10px;
}
.item p img {
  width: 375px;
}
.fix {
  width: 375px;
  height: 50px;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fix div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fix img {
  width: 18px;
  height: 18px;
  margin-bottom: 1.33vw;
}
.fix p {
  font-size: 10px;
  color: #646566;
  margin: 0;
}
.fix p {
  padding: 1.33vw;box-sizing: border-box;
}
.fix button:nth-child(1) {
  width:110px;
  height:40px;
  background-color: #d9f6ef;
  color: #1ba784;
  font-weight: 500;
  font-size: 3.73vw;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border: none;
}
.fix button:nth-child(2) {
  width:110px;
  height: 40px;
  background-color: #1ba784;
  color: #fff;
  font-weight: 500;
  font-size: 3.73vw;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border: none;
}
</style>